<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="app">
        {{person}}
        <br>
        <!-- <p>{{msg}}</p> --> 
        <!-- 插值表达式拥有解析标签体内容 -->
        <p>{{count}}</p>
        <p v-once>{{count}}</p>
        <a v-bind:href="url">123213</a>
        <button @click="add">++++</button>  
        
    </div>
    <script>
        const app = Vue.createApp({
            //vue2 选项式的写法
            // data() {
            //     return {
            //         person:[
            //             {id:001,name:'jack',age:18},
            //             {id:002,name:'tom',age:20},
            //             {id:003,name:'mary',age:28},
            //         ],
            //         msg:'hello world'
            //     }
            // },

            //vue3组合式写法
            setup(props) {
                let person =Vue.ref([
                    { id: 001, name: 'jack', age: 18 },
                    { id: 002, name: 'tom', age: 20 },
                    { id: 003, name: 'mary', age: 28 },
                ]) 
                let count = Vue.ref(0);
                let url = Vue.ref('https://cn.vuejs.org/')
                function add(){
                    console.log(count.value);
                    count.value++
                };
                return{
                    person,count,add,url
                }
            }
        });
        app.mount('#app') //接管id为app的容器
    </script>
</body>

</html>